import { defineComponent, computed, watch, watchEffect, onMounted, onBeforeUnmount, onUnmounted } from "vue";
import '@src/modules/trigger/view/design/style/config-panel.scss'
/* enum */
import { TriggerType } from '@src/modules/trigger/model/enum/index.ts'
import { useState } from "@src/modules/trigger/hooks/useVC";
/* components */
import state from '@src/modules/trigger/view/setting/util/state.js'
import TriggerApplication from '@src/modules/trigger/view/setting/components/trigger_application';
import TriggerCondition from '@src/modules/trigger/view/setting/components/trigger_condition'
import ExecutionAction from '@src/modules/trigger/view/setting/components/execution_action'
import ExecutionCode from '@src/modules/trigger/view/setting/components/execution_code/index.vue'
import MessageNotification from '@src/modules/trigger/view/setting/components/message_notification/index.vue'
/* hook */
import { useRouter } from '@src/modules/trigger/hooks/useVC.ts'
import { getNodeType as getNodeTypeCurrent } from '@src/modules/trigger/utils/index.ts'
/* type */
import { NodeTypeEnum } from '@src/modules/trigger/model/enum/index.ts'
/* utils */
import { uuid } from '@src/util/lang/string';

export default defineComponent({
    name: TriggerType.triggerDesignConfigPanel,
    props: {
        node: {
            type: Object,
            default: ()=> {}
        }
    },
    setup(props) {
        const { query } = useRouter()
        const [show, setShow] = useState(false)
        // const [title, setTitle] = useState('从哪里开始')
        const [kind, setKind] = useState(0)

        

        const title = computed(() => {
            const currentNodeT = getNodeType(state.currentNodeInfoFront)
            if (currentNodeT) {
                if (currentNodeT === 'code') {
                    return '代码规则'
                }
                if (currentNodeT === 'message') {
                    return '消息通知'
                }
                if (currentNodeT === NodeTypeEnum.START_NODE) {
                    return '从哪里开始'
                }
                if (currentNodeT === NodeTypeEnum.CONDITION_NODE) {
                    return '条件设置'
                }
                if (currentNodeT === NodeTypeEnum.NODE) {
                    return '执行动作'
                }
            }
        })
        const showNodeTitle = computed(() => {
            if (getNodeType(state.currentNodeInfoFront) === 'code') {
                if (!Reflect.has(state.currentNodeInfoFront.options, 'fieldOptions')) return ''
                return state.currentNodeInfoFront?.options?.fieldOptions.title || ''
            }
            return state.currentNodeInfoFront.name || ''
        })
        /**
         * @description 获取当前节点类型
         * @param nodeData 
         */
        const getNodeType = (nodeData) => {
            return getNodeTypeCurrent(nodeData)
        }

        const watchShowEffect = watchEffect(() => {
            setShow(state.data.changeOpenPanel)
            setKind(state.data.kind)
        })
        
        const closeDrawer = () => {
            state.data.changeOpenPanel = false
            state.data.kind = 0
        }

        onMounted(() => {

        })

        onBeforeUnmount(() => {
            watchShowEffect()
        })

        return ()=> (
            <div class="trigger-config-panel" style={{right: show.value ? '0' : '-600px'}}>
                {/* 根据node的不同渲染不同的组件 */}
                <div class="trigger-setting-new-header">
                    <div class="trigger-setting-new-title">
                        <div>{ showNodeTitle.value === '' ? title.value : showNodeTitle.value }</div>
                        <div class="trigger-setting-close iconfont icon-fe-close" onClick={() => closeDrawer()}></div>
                    </div>
                </div>
                { 
                    state.data.changeOpenPanel && 
                    (<div class="trigger-setting-new-content" key={state.currentNodeInfoFront.uniqueId || uuid()}>
                        {
                            kind.value === 1 ? (
                                <TriggerApplication />
                            ) : kind.value === 2 ? (
                                <TriggerCondition />
                            ) : kind.value === 3 ? (
                                <ExecutionAction />
                            ) : kind.value === 4 ? (
                                <ExecutionCode />
                            ) : kind.value === 5 ? (
                                <MessageNotification />
                            ) : null
                        }
                    </div>)
                }
            </div>
        )
    },
}) 